<template>
  <master title="章节列表">

    <div class="custom-tree-container">
      <div class="block">
        <!-- <p>使用 scoped slot</p> -->
        <el-tree :data="datas" 
                highlight-current="true"
                default-expand-all="true"
                :props="params" 
                @node-click="handleNodeClick">
        </el-tree>
      </div>
    </div>

  </master>
</template>
<script type="text/javascript">
  (function (G) {
    G.vue({
      "usingComponents": {///引入组件
        "master": "/components/Master/Master"///母版组件
      },
      "enablePullDownRefresh": true
    }, {
      data: {
        datas: [],
        // 用于定义树形结构模板
        params: {
          children: 'children',
          label: 'label',
        }

      },
      methods: {
        handleNodeClick(data) {
          // console.log(data);
          this.getList(data.id);
          },
        //获取列表
        getList() {
          // G.get('{JAVAURL}/sp-chapter/list1').then((res) => {
          //   console.log('{JAVAURL}/sp-chapter/list1', res.data);

          //   console.log("this.datas", this.datas); // 查看处理后的数据
          // });
          G.get('{JAVAURL}/sp-practice/treeChapter', {courseId:'1'}).then((res) => {
                        console.log("res.data1111111",res.data)
                        this.datas = res.data;
                    });
        }
      },
      mounted() {
        this.getList();
      }
    });
  })(Y)
</script>
<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>